<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的问卷</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div>
        <div class="zr_header">
            <div class="zr-center-box">
                <img src="img/logo.png" class="zr_logo"/>
                <ul class="zr_tab">
                    <li class="zr_tab-border">我的问卷</li>
                    <li>高级检索</li>
                    <li>综合题库</li>
                    <li>用户管理</li>
                    <li>考察点管理</li>
                    <li>联系人管理</li>
                    <li>帮助中心</li>
                </ul>
                <div class="zr_right-box">
                    <img class="zr_head-img" src="img/header.png"/>
                    <span>dnnfdsh</span>
                    <span>|</span>
                    <span>退出</span>
                </div>
            </div>
        </div>
        <div class="zr_fixed-box"></div>
        <div class="zr_nav">
            <div class="zr-center-box">
                <div class="zr_tabs1 zr_float-l">
                    <img class="zr_icion zr-icon-lefts zr_hidden zr_t1" src="img/img16.png">
                    <img class="zr_icion zr-icon-lefts zr_t3" src="img/img17.png">
                    <div class="zr_green-ionic zr_float-l zr-n">网络视图</div>
                </div>
                <div class="zr_tabs1 zr_float-l zr_mar-min">
                    <img class="zr_icion zr_hidden zr-icon-lefts zr_t2" src="img/img18.png">
                    <img class="zr_icion zr-icon-lefts zr_t4" src="img/img19.png">
                    <div class="zr_float-l zr-n">列表视图</div>
                </div>
                <div class="zr_float-r">
                    <span class="zr_float-l zr-title zr-mar-left-no">问卷类型</span>
                    <select class="zr_float-l zr_sel zr_sel-mar">
                        <option>全部</option>
                        <option>调查问卷</option>
                        <option>面访问卷</option>
                        <option>未分类</option>
                    </select>
                    <span class="zr_float-l zr-title zr-mar-left-no">调查状态</span>
                    <select class="zr_float-l zr_sel zr_sel-mar">
                        <option>全部</option>
                        <option>未发放</option>
                        <option>正常收集</option>
                        <option>暂停收集</option>
                        <option>已完成</option>
                    </select>
                    <span class="zr_float-l zr-title zr-mar-left-no zr_t3">排列方式</span>
                    <select class="zr_float-l zr_sel zr_sel-mar zr_t3">
                        <option>时间升序</option>
                        <option>时间降序</option>
                    </select>
                    <input class="zr_float-l zr_input-box" type="text" placeholder="请输入你的问卷名称">
                    <input class="zr_float-l zr-botton zr-mar-left-no" type="button" value="检索">
                    <input class="zr_float-l zr-botton zr_hidden" id="add-btn" type="button" value="+创建新问卷">
                    <div class="zr_float-l zr_mar-min zr_pointer zr-mar-right">
                        <img class="zr-icon-lefts" src="img/img9.png"/>回收站
                    </div>
                </div>
            </div>
        </div>
        <div class="zr-center-box">
            <div class="zr-box">
                <div class="zr-add-wj">
                    + 创建新问卷
                </div>
                <div id="box">
                    <div class="zr-add-list">
                        <img src="img/img-bg.png" class="zr-wj-bg"/>
                        <div class="zr-wj-til">
                            <div class="zr-pos-til zr-pos-til-yellow">调查问卷</div>
                            <p>文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办</p>
                        </div>
                        <div class="zr_float-l zr-wj-time">
                            <p>发放日期：2017-06-05 12:06:15</p>
                            <p>截止日期：2017-06-05 12:06:15</p>
                            <p>题目数量：（23）</p>
                            <p>回收数量：（2300）</p>
                            <p class="zr-type zr-yellow">已完成</p>
                        </div>
                        <ul class="zr_float-r zr-icon-ul">
                            <li><img src="img/img14.png" class="zr-icon-li"/></li>
                            <li><img src="img/img13.png" class="zr-icon-li"/></li>
                            <li><img src="img/img1.png" class="zr-icon-li"/></li>
                            <li><img src="img/img15.png" class="zr-icon-li"/></li>
                            <li><img src="img/img6.png" class="zr-icon-li icon-more"/></li>
                        </ul>
                        <ul class="zr-more">
                            <li><img src="img/img7.png" class="zr-icon"/>回收问卷</li>
                            <li><img src="img/img22.png" class="zr-icon"/>问卷浏览</li>
                            <li><img src="img/img3.png" class="zr-icon"/>分享问卷</li>
                            <li><img src="img/img5.png" class="zr-icon"/>复制问卷</li>
                            <li><img src="img/img12.png" class="zr-icon"/>删除问卷</li>
                        </ul>
                    </div>
                    <div class="zr-add-list">
                        <img src="img/img-bg.png" class="zr-wj-bg"/>
                        <div class="zr-wj-til">
                            <div class="zr-pos-til zr-pos-til-blue">面访问卷</div>
                            <p>文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办</p>
                        </div>
                        <div class="zr_float-l zr-wj-time">
                            <p>发放日期：2017-06-05 12:06:15</p>
                            <p>截止日期：2017-06-05 12:06:15</p>
                            <p>题目数量：（23）</p>
                            <p>回收数量：（2300）</p>
                            <p class="zr-type zr-greens">未发放</p>
                        </div>
                        <ul class="zr_float-r zr-icon-ul">
                            <li><img src="img/img14.png" class="zr-icon-li"/></li>
                            <li><img src="img/img13.png" class="zr-icon-li"/></li>
                            <li><img src="img/img1.png" class="zr-icon-li"/></li>
                            <li><img src="img/img15.png" class="zr-icon-li"/></li>
                            <li><img src="img/img6.png" class="zr-icon-li icon-more"/></li>
                        </ul>
                        <ul class="zr-more">
                            <li><img src="img/img7.png" class="zr-icon"/>回收问卷</li>
                            <li><img src="img/img22.png" class="zr-icon"/>问卷浏览</li>
                            <li><img src="img/img3.png" class="zr-icon"/>分享问卷</li>
                            <li><img src="img/img5.png" class="zr-icon"/>复制问卷</li>
                            <li><img src="img/img12.png" class="zr-icon"/>删除问卷</li>
                            <li><img src="img/img24.png" class="zr-icon"/>调查指派</li>
                        </ul>
                    </div>
                    <div class="zr-add-list">
                        <img src="img/img-bg.png" class="zr-wj-bg"/>
                        <div class="zr-wj-til">
                            <div class="zr-pos-til zr-pos-til-blue">面访问卷</div>
                            <p>文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办</p>
                        </div>
                        <div class="zr_float-l zr-wj-time">
                            <p>发放日期：2017-06-05 12:06:15</p>
                            <p>截止日期：2017-06-05 12:06:15</p>
                            <p>题目数量：（23）</p>
                            <p>回收数量：（2300）</p>
                            <div class="zr_float-l zr-type">
                                <div class="zr_float-l zr-green">正常收集</div>
                                <div class="zr_float-l zr-blue zr_mar-min zr_pointer"><img src="img/img20.png" class="zr-icon-left"/>停止答卷</div>
                            </div>
                        </div>
                        <ul class="zr_float-r zr-icon-ul">
                            <li><img src="img/img14.png" class="zr-icon-li"/></li>
                            <li><img src="img/img13.png" class="zr-icon-li"/></li>
                            <li><img src="img/img1.png" class="zr-icon-li"/></li>
                            <li><img src="img/img15.png" class="zr-icon-li"/></li>
                            <li><img src="img/img6.png" class="zr-icon-li icon-more"/></li>
                        </ul>
                        <ul class="zr-more">
                            <li><img src="img/img7.png" class="zr-icon"/>回收问卷</li>
                            <li><img src="img/img22.png" class="zr-icon"/>问卷浏览</li>
                            <li><img src="img/img3.png" class="zr-icon"/>分享问卷</li>
                            <li><img src="img/img5.png" class="zr-icon"/>复制问卷</li>
                            <li><img src="img/img12.png" class="zr-icon"/>删除问卷</li>
                            <li><img src="img/img24.png" class="zr-icon"/>调查指派</li>
                        </ul>
                    </div>
                    <div class="zr-add-list">
                        <img src="img/img-bg.png" class="zr-wj-bg"/>
                        <div class="zr-wj-til">
                            <div class="zr-pos-til zr-pos-til-gray">未分类</div>
                            <p>文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办文明礼办</p>
                        </div>
                        <div class="zr_float-l zr-wj-time">
                            <p>发放日期：2017-06-05 12:06:15</p>
                            <p>截止日期：2017-06-05 12:06:15</p>
                            <p>题目数量：（23）</p>
                            <p>回收数量：（2300）</p>
                            <div class="zr_float-l zr-type">
                                <div class="zr_float-l zr-red">暂停收集</div>
                                <div class="zr_float-l zr-blue zr_mar-min zr_pointer"><img src="img/img10.png" class="zr-icon-left"/>继续回收</div>
                            </div>
                        </div>
                        <ul class="zr_float-r zr-icon-ul">
                            <li><img src="img/img14.png" class="zr-icon-li"/></li>
                            <li><img src="img/img13.png" class="zr-icon-li"/></li>
                            <li><img src="img/img1.png" class="zr-icon-li"/></li>
                            <li><img src="img/img15.png" class="zr-icon-li"/></li>
                            <li><img src="img/img6.png" class="zr-icon-li icon-more"/></li>
                        </ul>
                        <ul class="zr-more">
                            <li><img src="img/img7.png" class="zr-icon"/>回收问卷</li>
                            <li><img src="img/img22.png" class="zr-icon"/>问卷浏览</li>
                            <li><img src="img/img3.png" class="zr-icon"/>分享问卷</li>
                            <li><img src="img/img5.png" class="zr-icon"/>复制问卷</li>
                            <li><img src="img/img12.png" class="zr-icon"/>删除问卷</li>
                            <li><img src="img/img24.png" class="zr-icon"/>调查指派</li>
                        </ul>
                    </div>
                </div>
                <div class="zr_common-box">
                    <p class="zr_page">
                        <a href="javascript:;">
                            首页
                        </a>
                        <a href="javascript:;">
                            <<
                        </a>
                        <a class="zr-click" href="javascript:;">
                            1
                        </a>
                        <a href="javascript:;">
                            2
                        </a>
                        <a href="javascript:;">
                            3
                        </a>
                        <a href="javascript:;">
                            >>
                        </a>
                        <a href="javascript:;">
                            末页
                        </a>
                    </p>
                </div>
            </div>
            <div class="zr-box zr_hidden">
                <div class="zr_common-box">
                    <table>
                        <thead>
                        <tr>
                            <td class="w-5">
                                序号
                            </td>
                            <td class="w-20">
                                问卷名称
                            </td>
                            <td class="w-10 zr-padding-left">
                                <div class="zr-td-center">
                                    <div class="zr_float-l">问卷类型</div>
                                    <div class="zr_float-l zr-sx-jt">
                                        <span class="block-j">▲</span>
                                        <span class="block-j">▼</span>
                                    </div>
                                </div>
                            </td>
                            <td class="w-10 zr-padding-left">
                                <div class="zr-td-center" style="width: 46px;">
                                    <div class="zr_float-l">状态</div>
                                    <div class="zr_float-l zr-sx-jt">
                                        <span class="block-j">▲</span>
                                        <span class="block-j">▼</span>
                                    </div>
                                </div>
                            </td>
                            <td class="w-10 zr-padding-left">
                                <div class="zr-td-center">
                                    <div class="zr_float-l">题目总数</div>
                                    <div class="zr_float-l zr-sx-jt">
                                        <span class="block-j">▲</span>
                                        <span class="block-j">▼</span>
                                    </div>
                                </div>
                            </td>
                            <td class="w-10 zr-padding-left ">
                                <div class="zr-td-center">
                                    <div class="zr_float-l">回收问卷</div>
                                    <div class="zr_float-l zr-sx-jt">
                                        <span class="block-j">▲</span>
                                        <span class="block-j">▼</span>
                                    </div>
                                </div>
                            </td>
                            <td class="w-15 zr-padding-left">
                                <div class="zr-td-center">
                                    <div class="zr_float-l">创建时间</div>
                                    <div class="zr_float-l zr-sx-jt">
                                        <span class="block-j">▲</span>
                                        <span class="block-j">▼</span>
                                    </div>
                                </div>
                            </td>
                            <td class="w-20">
                                操作
                            </td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>01</td>
                            <td>
                                Addshah市场部文库
                            </td>
                            <td>
                                调查问卷
                            </td>
                            <td class="zr-greens">
                                未发放
                            </td>
                            <td>
                                4
                            </td>
                            <td>
                                1024
                            </td>
                            <td>
                                2017年11月23日 16:23
                            </td>
                            <td class="zr_change">
                                <div class="zr-icon-box">
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="刷新"><img src="img/img14.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="设计问卷"><img src="img/img13.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="发布问卷"><img src="img/img1.png" class="zr_add-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="统计分析"><img src="img/img15.png" class="zr_del-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer more" title="更多选项"><img src="img/img6.png" style="margin-top: 10px;" class="zr_del-p"/></div>
                                    <ul class="zr-more zr-more-pos">
                                        <li><img src="img/img7.png" class="zr-icon zr-icon-mar"/>回收问卷</li>
                                        <li><img src="img/img22.png" class="zr-icon zr-icon-mar"/>问卷浏览</li>
                                        <li><img src="img/img3.png" class="zr-icon zr-icon-mar"/>分享问卷</li>
                                        <li><img src="img/img5.png" class="zr-icon zr-icon-mar"/>复制问卷</li>
                                        <li><img src="img/img12.png" class="zr-icon zr-icon-mar"/>删除问卷</li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>02</td>
                            <td>
                                Addshah市场部文库
                            </td>
                            <td>
                                调查问卷
                            </td>
                            <td class="zr-green">
                                正常收集
                            </td>
                            <td>
                                4
                            </td>
                            <td>
                                1024
                            </td>
                            <td>
                                2017年11月23日 16:23
                            </td>
                            <td class="zr_change">
                                <div class="zr-icon-box">
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="刷新"><img src="img/img14.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="设计问卷"><img src="img/img13.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="发布问卷"><img src="img/img1.png" class="zr_add-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="统计分析"><img src="img/img15.png" class="zr_del-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer more" title="更多选项"><img src="img/img6.png" style="margin-top: 10px;" class="zr_del-p"/></div>
                                    <ul class="zr-more zr-more-pos">
                                        <li><img src="img/img7.png" class="zr-icon zr-icon-mar"/>回收问卷</li>
                                        <li><img src="img/img22.png" class="zr-icon zr-icon-mar"/>问卷浏览</li>
                                        <li><img src="img/img3.png" class="zr-icon zr-icon-mar"/>分享问卷</li>
                                        <li><img src="img/img5.png" class="zr-icon zr-icon-mar"/>复制问卷</li>
                                        <li><img src="img/img12.png" class="zr-icon zr-icon-mar"/>删除问卷</li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>03</td>
                            <td>
                                Addshah市场部文库
                            </td>
                            <td>
                                调查问卷
                            </td>
                            <td class="zr-yellow">
                                已完成
                            </td>
                            <td>
                                4
                            </td>
                            <td>
                                1024
                            </td>
                            <td>
                                2017年11月23日 16:23
                            </td>
                            <td class="zr_change">
                                <div class="zr-icon-box">
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="刷新"><img src="img/img14.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="设计问卷"><img src="img/img13.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="发布问卷"><img src="img/img1.png" class="zr_add-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="统计分析"><img src="img/img15.png" class="zr_del-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer more" title="更多选项"><img src="img/img6.png" style="margin-top: 10px;" class="zr_del-p"/></div>
                                    <ul class="zr-more zr-more-pos">
                                        <li><img src="img/img7.png" class="zr-icon zr-icon-mar"/>回收问卷</li>
                                        <li><img src="img/img22.png" class="zr-icon zr-icon-mar"/>问卷浏览</li>
                                        <li><img src="img/img3.png" class="zr-icon zr-icon-mar"/>分享问卷</li>
                                        <li><img src="img/img5.png" class="zr-icon zr-icon-mar"/>复制问卷</li>
                                        <li><img src="img/img12.png" class="zr-icon zr-icon-mar"/>删除问卷</li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>04</td>
                            <td>
                                Addshah市场部文库
                            </td>
                            <td>
                                调查问卷
                            </td>
                            <td class="zr-red">
                                暂停收集
                            </td>
                            <td>
                                4
                            </td>
                            <td>
                                1024
                            </td>
                            <td>
                                2017年11月23日 16:23
                            </td>
                            <td class="zr_change">
                                <div class="zr-icon-box">
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="刷新"><img src="img/img14.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="设计问卷"><img src="img/img13.png" class="zr_update-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="发布问卷"><img src="img/img1.png" class="zr_add-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer " title="统计分析"><img src="img/img15.png" class="zr_del-p"/></div>
                                    <div class="zr_float-l zr-icon-w zr_pointer more" title="更多选项"><img src="img/img6.png" style="margin-top: 10px;" class="zr_del-p"/></div>
                                    <ul class="zr-more zr-more-pos">
                                        <li><img src="img/img7.png" class="zr-icon zr-icon-mar"/>回收问卷</li>
                                        <li><img src="img/img22.png" class="zr-icon zr-icon-mar"/>问卷浏览</li>
                                        <li><img src="img/img3.png" class="zr-icon zr-icon-mar"/>分享问卷</li>
                                        <li><img src="img/img5.png" class="zr-icon zr-icon-mar"/>复制问卷</li>
                                        <li><img src="img/img12.png" class="zr-icon zr-icon-mar"/>删除问卷</li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <p class="zr_page">
                        <a href="javascript:;">
                            首页
                        </a>
                        <a href="javascript:;">
                            <<
                        </a>
                        <a class="zr-click" href="javascript:;">
                            1
                        </a>
                        <a href="javascript:;">
                            2
                        </a>
                        <a href="javascript:;">
                            3
                        </a>
                        <a href="javascript:;">
                            >>
                        </a>
                        <a href="javascript:;">
                            末页
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script>
    $('.icon-more').click(function(){
        $(this).parents().siblings('.zr-more').show();
    });
    $('.zr-more').on('mouseleave',function(){
        $('.zr-more').hide();
    });
    $('.zr_tabs1').click(function () {
        var index = $(this).index();
        $('.zr-box').eq(index).show().siblings().hide();
        if(index == 1){
            $('#add-btn').show();
            $('.zr_t1,.zr_t2').show();
            $('.zr_t3,.zr_t4').hide();
            $('.zr-n').eq(1).addClass('zr_green-ionic');
            $('.zr-n').eq(0).removeClass('zr_green-ionic');
        }else{
            $('#add-btn').hide();
            $('.zr_t1,.zr_t2').hide();
            $('.zr_t3,.zr_t4').show();
            $('.zr-n').eq(0).addClass('zr_green-ionic');
            $('.zr-n').eq(1).removeClass('zr_green-ionic');
        }
    });
    $('.zr-more li,.zr-icon-w').on('mouseenter',function () {
        var src = $(this).find('img').attr('src').slice(0,-4) + '(1).png';
        $(this).find('img').attr('src', src);
    }).on('mouseleave',function () {
        var src = $(this).find('img').attr('src').slice(0,-7) + '.png';
        $(this).find('img').attr('src', src);
    });
    $('.zr-icon-w').on('mouseenter',function () {
        $(this).addClass('zr-mouse-icon');
    }).on('mouseleave',function () {
        $(this).removeClass('zr-mouse-icon');
    });
    $('.more').click(function () {
        $(this).siblings('.zr-more').show();
    })
</script>
</html>